<template>
	<view class="box padding">
		<u-form labelPosition="right" :model="model1" :rules="rules" ref="uForm">
			<!-- 粘贴识别信息 -->
			<view class="shibiebox">
				<view style="height: 170px;">
					<textarea class="texta" placeholder="粘贴信息自动识别" v-model="pasteText"></textarea>
					<view>
						<view class="seebtn" @click="handlePaste">识别</view>
					</view>
				</view>
			</view>
				
				<!-- <view>
				        <AddressParse @addressConfirm="addressConfirm"></AddressParse>
				    </view> -->
			<!-- 时间选择 -->
			<u-form-item label-width=" 100px" label="日期" borderBottom @tap="showData = true" ref="item1">
				<u-input v-model="model1.form.data" disabled disabledColor="#ffffff" placeholder="请选择日期"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
				<u-picker mode="time" v-model="showData" :params="dateparams" @confirm="selectData"></u-picker>
			<!-- 时间选择 -->
			
			<u-picker mode="region" v-model="showRegion" :params="params" @confirm="selectRegion"></u-picker>


			<!-- 类型选择 -->

			<u-form-item label-width=" 100px" label="类型" prop="form.sex" borderBottom>
				<u-radio-group v-model="radiovalue1" @change="groupChange">
					<u-radio v-for="( item, index ) in  radiolist1 " :key="index" :name="item.name"
						@change="radioChange">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>

			

			<!-- 客户名称 -->
			<u-form-item label-width=" 100px" label="客户名称" prop="form.name" borderBottom ref="item1">
				<u-input style="text-align: right;" v-model="model1.form.name" placeholder="请输入名称"></u-input>
			</u-form-item>

			<!-- 客户手机号 -->
			<u-form-item label-width=" 100px" label="客户手机号" prop="form.phone" borderBottom ref="item1">
				<u-input style="text-align: right;" v-model="model1.form.phone" placeholder="请输入手机号"></u-input>
			</u-form-item>
			<!-- 客户地址 -->
			<u-form-item label-width=" 100px" label="客户地址" prop="form.address"  borderBottom ref="item1" @tap="showRegions">
				<!-- <u-input v-model="model1.form.address" placeholder="请输入地址"></u-input> -->
				<u-input style="text-align: right;" v-model="model1.form.address" disabled disabledColor="#ffffff" placeholder="请输入地址"></u-input>
				<u-icon slot="right" name="arrow-right" ></u-icon>
			</u-form-item>
			<!-- 备注客户 -->
			<u-form-item label-width=" 100px" label="备注客户"  borderBottom ref="item1">
				<!-- <u-input v-model="model1.form.address" placeholder="请输入地址"></u-input> -->
				<u-input v-model="model1.form.remark" placeholder="备注该客户"></u-input>
			</u-form-item>

			<!-- 锂电的情况 -->
			<template v-if="radiovalue1 == '锂电池'">
				<u-form-item label-width=" 100px" label="容量" prop="form.load" borderBottom ref="item1">
					<u-input v-model="model1.form.load" placeholder="请输入容量"></u-input>
				</u-form-item>
				<u-form-item label-width=" 100px" label="车型" prop="form.model" borderBottom ref="item1">
					<u-input v-model="model1.form.model" placeholder="请输入车型"></u-input>
				</u-form-item>
				<u-form-item label-width=" 100px" label="保护板" prop="form.proboard" borderBottom ref="item1">
					<u-input v-model="model1.form.proboard" placeholder="请输入保护板"></u-input>
				</u-form-item>
				<u-form-item label-width=" 100px" label="定金" prop="form.deposit" borderBottom ref="item1">
					<u-input v-model="model1.form.deposit" placeholder="请输入定金"></u-input>
				</u-form-item>
			</template>
			<!-- 锂电的情况 -->

			<!-- 无三大定制化的情况 -->
			<template v-if="radiovalue1 == '无三大件定制'">
				<u-form-item label-width=" 100px" label="减震颜色" prop="form.jzcolor" borderBottom ref="item1">
					<u-input v-model="model1.form.jzcolor" placeholder="请输入减震颜色"></u-input>
				</u-form-item>
				<u-form-item label-width=" 100px" label="卡钳颜色" prop="form.kqcolor" borderBottom ref="item1">
					<u-input v-model="model1.form.kqcolor" placeholder="请输入卡钳颜色"></u-input>
				</u-form-item>
				<u-form-item label-width=" 100px" label="轮毂颜色" prop="form.lgcolor" borderBottom ref="item1">
					<u-input v-model="model1.form.lgcolor" placeholder="请输入轮毂颜色"></u-input>
				</u-form-item>
				<u-form-item label-width=" 100px" label="车壳颜色" prop="form.ckcolor" borderBottom ref="item1">
					<u-input v-model="model1.form.ckcolor" placeholder="请输入车壳颜色"></u-input>
				</u-form-item>
			</template>
			<!-- 无三大定制化的情况 -->

			<!-- 其他的情况 -->
			<template v-if="radiovalue1 == '其他'">
				<!-- 客户描述 -->
				<u-form-item label-width=" 100px" label="客户描述" prop="form.describe" borderBottom ref="item1">
					<u-input v-model="model1.form.describe" placeholder="请输入描述"></u-input>
				</u-form-item>
				<!-- 选择商品 -->
				<u-form-item label-width="240px" label="请选择商品" prop="form.goods" borderBottom ref="item1">
					<u-input placeholder="请选择商品" disabled disabledColor="#ffffff"></u-input>
					<u-icon slot="right" name="plus"></u-icon>
					<!-- {{ model1.form.goods }} -->
				</u-form-item>
				<!-- 添加的商品列表 -->
				<u-form-item borderBottom v-for="( item, index ) in  model1.form.goods " :key="index">
					<view class="flex justify-between">
						<view class="goodsImg">
							<img src="/static/logo.png" alt="">
						</view>
						<view class="flex flex-direction">
							<view style="width: 180px;" class="text-lg text-bold text-cut">{{ item.name }}</view>
							<view class="text-gray">{{ item.hh }}</view>
							<view class="text-gray">{{ item.gg }}</view>
						</view>
						<view class="flex flex-direction">
							<view class="text-lg text-bold">{{ item.prize }}</view>
							<view class="text-gray">{{ item.danwei }}</view>
							<view class="text-gray">{{ item.num }}</view>
						</view>
						<view>
							<u-icon @click="openDeleteGoods(index)" color="red" size="20px"
								name="close-circle-fill"></u-icon>
						</view>
					</view>
				</u-form-item>
			</template>
			<!-- 其他的情况 -->
			

			<!-- 请选择生产人员 -->
			<u-form-item @click="showProducer = true" label-width="240px" label="请选择生产人员" prop="form.producer"
				borderBottom ref="item1">
				<u-input placeholder="请选择生产人员" disabled disabledColor="#ffffff"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-picker @confirm="selectProducer()" @cancel="showProducer = false" :show="showProducer"
				:columns="columns"></u-picker>
			<u-form-item>
				<view>生产人员：{{ model1.form.producer }}</view>
			</u-form-item>

			<!-- 是否组装 true组装 false不组装-->
			<u-form-item borderBottom label-width="90px" label="组装">
				<view class="flex flex-direction margin-top">
					<view class="flex" style="gap: 20px;">
						<view class="switchtext">不组装</view>
						<u-switch v-model="model1.form.isAssemble" @change="changeAb"></u-switch>
						<view class="switchtext">组装</view>
					</view>
					<view class="text-xs text-gray">是否组装发货<text class="text-red">*</text> </view>
				</view>
			</u-form-item>
			<!-- 定金或全款 true全款 false定金-->
			<u-form-item borderBottom label-width="90px" label="定金或全款">
				<view class="flex flex-direction margin-top">
					<view class="flex" style="gap: 20px;">
						<view class="switchtext">定金</view>
						<u-switch v-model="model1.form.ismoney" @change="changeMoney"></u-switch>
						<view class="switchtext">全款</view>
					</view>
					<view class="text-xs text-gray">定金请注意收款金额<text class="text-red">*</text> </view>
				</view>
			</u-form-item>
			<!-- 邮寄方式 true包邮 false到付-->
			<u-form-item borderBottom label-width="90px" label="邮寄方式">
				<view class="flex flex-direction margin-top">
					<view class="flex" style="gap: 20px;">
						<view class="switchtext">不组装</view>
						<u-switch v-model="model1.form.post" @change="changePost"></u-switch>
						<view class="switchtext">组装</view>
					</view>
					<view class="text-xs text-gray">请注意是否包邮<text class="text-red">*</text> </view>
				</view>
			</u-form-item>
		</u-form>

		<!-- 金额 -->
		<u-form-item borderBottom label-width="90px" label="金额">
			<view style="font-weight: 800;font-size: 20px;">{{ model1.form.money }}元</view>
		</u-form-item>

		<!-- 上传转款截图 -->

		<u-form-item borderBottom label-width=" 100px" label="上传转款截图" prop="form.imgurl">
			<view class="zhuankuan flex flex-direction align-center">
				<view class="text-sm text-gray margin-bottom">微信/支付宝转款截图 <text class="text-red">*</text></view>
				<view v-if="model1.form.imgurl == ''" class="bg" @click="choosePhoto"></view>
				<view v-else class="bgup">
					<view class="guan" @click="openDeleteImg">
						<u-icon color="red" size="30px" name="close-circle-fill"></u-icon>
					</view>
					<img @click="openImg" :src="model1.form.imgurl" alt="">
				</view>
			</view>
		</u-form-item>
		<!-- 客户描述 -->
		<u-form-item borderBottom label-width=" 100px" label="备注" ref="item1">
			<u-input v-model="model1.form.notes" placeholder="请输入备注"></u-input>
		</u-form-item>

		<u-form-item>
			<view class="sumbit">
				<view class="btn">提交订单</view>
			</view>
		</u-form-item>

	</view>
</template>

<script>
	import AddressParse from '@/components/xghc-addrress/userAddress.vue'

	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					province: true,
					city: true,
					area: true,
					timestamp: true
				},
				dateparams:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				pasteText: '',
				showRegion:false,
				showSex: false, //是否显示性别选择器
				showData: false, //是否显示日期选择器
				showProducer: false, //是否显示生产人员选择器
				extractedInfo: {
					'名字': '',
					'号码': '',
					'地址': '',
					'容量': '',
					'车型': '',
					'保护板': '',
					'定金': '',
					'减震颜色': '',
					'卡钳颜色': '',
					'轮毂颜色': '',
					'车壳颜色': ''
				},
				//当前的类型
				type: '无三大件定制',


				columns: [
					['王师傅18878787878', '刘师傅18878787878', '吴师傅18878787878']
				],


				radiolist1: [{
						name: '无三大件定制',
						disabled: false
					},
					{
						name: '锂电池',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '无三大件定制',

				model1: {
					form: {
						Nid: 'XDD20240124004',
						sex: '',
						data: '2024-01-24',
						name: '', //客户名称
						phone: '', //电话
						remark: '', 
						address: '', //地址
						describe: '', //描述
						producer: '', //生产人
						goods: [{
								name: '不让他呢GT403 钢1',
								hh: '货号：GTD456774',
								gg: '规格：80*30*0.12',
								prize: '￥457',
								danwei: '单位/对',
								num: '数量1'
							},
							{
								name: '而被认为GT403 钢2',
								hh: '货号：GTD456774',
								gg: '规格：80*30*0.12',
								prize: '￥457',
								danwei: '单位/对',
								num: '数量1'
							},
							{
								name: '老鹰卡钳GT403 钢3',
								hh: '货号：GTD456774',
								gg: '规格：80*30*0.12',
								prize: '￥457',
								danwei: '单位/对',
								num: '数量1'
							}
						], //商品
						isAssemble: false, //true组装 false不组装
						ismoney: false, //true全款 false定金
						post: false, //true包邮 false到付
						money: '8999.8', //金额
						imgurl: '', //转款截图
						notes: '', //备注


						// 锂电的情况
						load: '', //容量
						model: '', //车型
						proboard: '', //保护板
						deposit: '', //定金

						//无三大定制化的情况
						jzcolor: '', //减震颜色
						kqcolor: '', //卡钳颜色
						lgcolor: '', //轮毂颜色
						ckcolor: '', //车壳颜色
					},
				},

				rules: {
					'form.Nid': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'form.data': {
						type: 'string',
						required: true,
						message: '请选择日期',
						trigger: ['blur', 'change']
					},
					'form.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'form.address': {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
					'form.phone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					'form.producer': {
						type: 'string',
						required: true,
						message: '请填写生产人',
						trigger: ['blur', 'change']
					},
					'form.goods': {
						type: 'string',
						required: true,
						message: '请填写商品',
						trigger: ['blur', 'change']
					},
					'form.goods': {
						type: 'string',
						required: true,
						message: '请上传转款截图',
						trigger: ['blur', 'change']
					},
					'form.load': {
						type: 'string',
						required: true,
						message: '请输入容量',
						trigger: ['blur', 'change']
					},
					'form.model': {
						type: 'string',
						required: true,
						message: '请输入车型',
						trigger: ['blur', 'change']
					},
					'form.proboard': {
						type: 'string',
						required: true,
						message: '请输入保护板',
						trigger: ['blur', 'change']
					},
					'form.deposit': {
						type: 'string',
						required: true,
						message: '请输入定金',
						trigger: ['blur', 'change']
					},




				},
				radio: '',
				switchVal: false
			};
		},
		components:{
		        AddressParse
		    },
		onLoad(options) {
			this.model1.form.data = this.getNowFormatDate()
		},
		methods: {
			 addressConfirm(data){
			                console.log(data);
			            },
			showRegions(){
				this.showRegion = true
				console.log('this.showRegion: ', this.showRegion)
			},
			handlePaste(event) {
				console.log('event: ')

				// const clipboardData = event.clipboardData || window.clipboardData;

				// const pastedText = clipboardData.getData('text');
				const pastedText = this.pasteText;
				const fields = ['名字', '号码', '地址', '容量', '车型', '保护板', '定金', '减震颜色', '卡钳颜色', '轮毂颜色', '车壳颜色'];

				// 按照换行符分割粘贴的文本
				const lines = pastedText.split('\n');
				console.log('lines: ', lines)

				// 对每一行进行处理
				lines.forEach(line => {
					// 对每个字段进行匹配
					fields.forEach(field => {
						const regExp = new RegExp(`${field}：(.*?)$`);
						const match = line.match(regExp);
						if (match && match[1]) {
							this.extractedInfo[field] = match[1].trim();
						}
					});
				});
				console.log('321', this.extractedInfo)


				this.model1.form.name = this.extractedInfo['名字']
				this.model1.form.phone = this.extractedInfo['号码']
				this.model1.form.address = this.extractedInfo['地址']
				this.model1.form.load = this.extractedInfo['容量']
				this.model1.form.model = this.extractedInfo['车型']
				this.model1.form.proboard = this.extractedInfo['保护板']
				this.model1.form.deposit = this.extractedInfo['定金']
				this.model1.form.jzcolor = this.extractedInfo['减震颜色']
				this.model1.form.kqcolor = this.extractedInfo['卡钳颜色']
				this.model1.form.lgcolor = this.extractedInfo['轮毂颜色']
				this.model1.form.ckcolor = this.extractedInfo['车壳颜色']
			},
			//当前时间
			getNowFormatDate() {
				let date = new Date(),
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate() // 获取当前日(1-31)
				if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
				if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0

				return `${year}-${month}-${strDate}`
			},
			openDeleteGoods(i) {
				const _this = this
				//删除商品弹窗
				uni.showModal({
					title: '提示',
					content: '是否删除商品',
					// #ifdef APP-PLUS
					showCancel: false,
					// #endif
					success: (res) => {
						if (res.confirm) {
							console.log('客户点击确定');
							_this.deleteGoods(i)
						}
					}
				})
			},
			deleteGoods(i) {
				console.log('%c [ i ]-370', 'font-size:13px; background:pink; color:#bf2c9f;', i)
				//删除商品
				this.model1.form.goods.splice(i, 1)
			},
			//预览图片
			openImg() {
				let imgsArray = this.model1.form.imgurl.split(',');
				uni.previewImage({
					current: 0,
					urls: imgsArray,
				});
			},
			//删除图片弹窗
			openDeleteImg() {
				const _this = this
				//弹框确认是否删除图片
				uni.showModal({
					title: '提示',
					content: '是否删除转款截图',
					// #ifdef APP-PLUS
					showCancel: false,
					// #endif
					success: (res) => {
						if (res.confirm) {
							console.log('客户点击确定');
							_this.deleteImgUrl()
						}
					}
				})
			},
			//删除图片
			deleteImgUrl() {
				this.model1.form.imgurl = ''
			},
			//选择图片
			choosePhoto() {
				const _this = this;
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数，默认9
					sourceType: ['album'], //album 从相册选图，camera 使客相机，默认二者都有。如需直接开相机或直接选相册，请只使客一个选项
					sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
					success(res) {
						console.log('选择图片完成', res)
						// 调客上传图片的接口
						// _this.uploadPhoto(res.tempFilePaths);
						_this.model1.form.imgurl = res.tempFilePaths[0]
						console.log('%c [ res.tempFilePaths[0] ]-261',
							'font-size:13px; background:pink; color:#bf2c9f;', res.tempFilePaths[0])
					},
					fail() {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			},

			changeMoney() {
				console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
				this.model1.form.ismoney = e
			},
			changePost() {
				console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
				this.model1.form.post = e
			},
			changeAb(e) {
				console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
				this.model1.form.isAssemble = e
			},
			selectProducer(e) {
				console.log('%c [ e ]-150', 'font-size:13px; background:pink; color:#bf2c9f;', e)
				this.showProducer = false
				this.model1.form.producer = e.value[0]
			},
			// groupChange(n) {
			// 	console.log('groupChange', n);
			// },
			radioChange(n) {
				console.log('radioChange', n);
				this.radiovalue1 = n
			},
			selectData(e) {
				this.showData = false;
				this.model1.form.data = e.year+'-' + e.month+'-' + e.day
				// this.timeValue = timeValue;
				// console.log(timeValue);


			},
			selectRegion(e) {
				console.log('e: ', e)
				this.showRegion = false;
				this.model1.form.address = e.province.label + e.city.label + e.area.label
				// this.timeValue = timeValue;
				// console.log(timeValue);
			
			
			},
			sexSelect(e) {
				this.model1.form.sex = e.name
				this.$refs.uForm.validateField('form.sex')
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss" scoped>
	.goodsImg {
		width: 50px;
		height: 50px;

		img {
			width: 100%;
			height: 100%;
			background-size: cover;
		}
	}

	.sumbit {
		width: 100%;
		height: 88px;
		text-align: center;
		color: #fff;
		background: #ffffff;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.btn {
			width: 250px;
			height: 40px;
			background-color: #3C9CFF;
			color: #ffffff;
			text-align: center;
			line-height: 40px;
		}
	}

	.bgup {
		width: 174px;
		height: 300px;
		background: whitesmoke;
		position: relative;

		.guan {
			position: absolute;
			top: -20px;
			right: -20px;

		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.bg {
		text-align: center;
		width: 174px;
		height: 138px;
		background-image: url('');
		background-size: cover;


	}

	.zhuankuan {
		text-align: center;
	}

	.box {}

	.switchtext {
		width: 50px;
		line-height: 25px;

	}

	.seebtn {
		width: 100px;
		height: 40px;
		padding: 4px;
		text-align: center;
		background: #3C9CFF;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-top: 10px;
		border-radius: 4px;

	}

	.texta {
		height: 100px;
		width: 100%;
		background: #F9F9FB;
		border-radius: 20rpx;
	}
</style>